<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吉大树洞 - 话题详情</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <div class="background"></div>
    <div class="container">
        <div id="topicDetail" class="topic-detail">
            <!-- 话题详情将动态插入到这里 -->
        </div>
        <div class="replies-list">
            <h2>回复</h2>
            <div id="repliesList">
                <!-- 回复将动态插入到这里 -->
            </div>
        </div>
        <div class="reply-form">
            <h2>发表回复</h2>
            <form id="replyForm">
                <label for="reply_content">回复内容:</label>
                <textarea id="reply_content" name="reply_content" rows="5" required></textarea>

                <label for="anonymous">
                    <input type="checkbox" id="anonymous" name="anonymous"> 匿名回复
                </label>

                <button type="submit">提交回复</button>
            </form>
        </div>
        <p><a href="topics.html">返回话题列表</a></p>
    </div>

    <script>
        // 获取话题 ID
        const urlParams = new URLSearchParams(window.location.search);
        const topicId = urlParams.get('topicId');

        // 从 localStorage 获取话题列表
        const topics = JSON.parse(localStorage.getItem('topics')) || [];

        // 找到当前话题
        const topic = topics.find(t => t.id == topicId);

        // 显示话题详情
        const topicDetail = document.getElementById('topicDetail');
        if (topic) {
            topicDetail.innerHTML = `
                <h1>${topic.title}</h1>
                <p>${topic.content}</p>
                <small>发布时间: ${topic.timestamp}</small>
            `;
        } else {
            topicDetail.innerHTML = '<p>话题不存在。</p>';
        }

        // 从 localStorage 获取回复列表
        const replies = JSON.parse(localStorage.getItem('replies')) || [];

        // 过滤出当前话题的回复
        const topicReplies = replies.filter(reply => reply.topicId == topicId);

        // 显示回复列表
        const repliesList = document.getElementById('repliesList');
        if (topicReplies.length > 0) {
            topicReplies.forEach(reply => {
                const replyElement = document.createElement('div');
                replyElement.classList.add('reply');
                replyElement.innerHTML = `
                    <p>${reply.content}</p>
                    <small>${reply.anonymous ? '匿名用户' : '用户'} 回复于 ${reply.timestamp}</small>
                `;
                repliesList.appendChild(replyElement);
            });
        } else {
            repliesList.innerHTML = '<p>暂无回复。</p>';
        }

        // 回复表单提交逻辑
        document.getElementById('replyForm').addEventListener('submit', function (event) {
            event.preventDefault(); // 阻止表单默认提交行为

            // 获取回复内容
            const replyContent = document.getElementById('reply_content').value;
            const isAnonymous = document.getElementById('anonymous').checked;

            // 创建回复对象
            const reply = {
                id: Date.now(), // 使用时间戳作为唯一 ID
                topicId,
                content: replyContent,
                anonymous: isAnonymous,
                timestamp: new Date().toLocaleString() // 添加时间戳
            };

            // 从 localStorage 获取回复列表
            let replies = JSON.parse(localStorage.getItem('replies')) || [];

            // 将新回复添加到回复列表
            replies.push(reply);

            // 将更新后的回复列表存储到 localStorage
            localStorage.setItem('replies', JSON.stringify(replies));

            alert('回复成功！');
            window.location.reload(); // 刷新页面以显示新回复
        });
    </script>
</body>
</html>